<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>bootstrap</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		hr{
			border: 1px solid #666;
		}
		body{
			margin: 50px;
		}
	</style>
</head>
<body>
	<!-- 输入框组 -->
	<!-- 在左侧添加文字 -->
	<div class="input-group">
		<span class="input-group-addon">@</span>
		<input type="text" class="form-control">
	</div>
	<!-- 在右侧添加文字 -->
	<div class="input-group">
		<input type="text" class="form-control">
		<span class="input-group-addon">@sina.com</span>
	</div>
	<!-- 在两侧添加亭子 -->
	<div class="input-group">
		<span class="input-group-addon">$</span>
		<input type="text" class="form-control">
		<span class="input-group-addon">.00</span>
	</div>
	<!-- 左侧使用单选按钮或复选框 -->
	<div class="input-group">
		<span class="input-group-addon">
			<input type="radio" name="" id="">
		</span>
		<input type="text" class="form-control">
	</div>
	<!-- 在右侧使用按钮 -->
	<div class="input-group">
		<input type="text" class="form-control">
		<span class="input-group-btn">
			<button class="btn btn-default">提交</button>
		</span>
	</div>
	<!-- 作为额外元素的按钮式下拉菜单 -->
	<div class="input-group">
		<div class="input-group-btn">
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				下拉菜单 <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">首页</a></li>	
				<li><a href="#">资讯</a></li>	
				<li><a href="#">产品</a></li>	
				<li><a href="#">公司</a></li>	
			</ul>
		</div>
		<input type="text" class="form-control">
	</div>
	<hr>


	<!-- 基本的导航组件：标签页 -->
	<ul class="nav nav-tabs">
		<li class="active"><a href="#">首页</a></li>	
		<li><a href="#">资讯</a></li>	
		<li><a href="#">产品</a></li>	
		<li><a href="#">公司</a></li>	
	</ul>

	<!-- 胶囊式标签页 -->
	<ul class="nav nav-justified">
		<li class="active"><a href="#">首页</a></li>	
		<li><a href="#">资讯</a></li>	
		<li><a href="#">产品</a></li>	
		<li class="disabled"><a href="#">公司</a></li>	
	</ul>
	<hr>

	<!-- 导航条，包含标题、列表 -->
	<div class="navbar navbar-default navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<a href="#" class="navbar-brand">
					<img src="images/qq.jpg" alt="" style="width: 20px;">
				</a>
			</div>
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">灌水区域</a></li>
				<li><a href="#">论坛首页</a></li>
				<li><a href="#">技术论坛</a></li>
				<li><a href="#">积分商城</a></li>
				<li><a href="#">投票</a></li>
			</ul>
			<button class="btn btn-default navbar-btn navbar-right">注册</button>
			<button class="btn btn-default navbar-btn navbar-right" style="margin-right: 10px;">登陆</button>
			<form class="navbar-form navbar-right">
				<div class="input-group">
					<div class="input-group-btn">
						<button class="btn btn-default" data-toggle="dropdown">
							文章 <span class="caret"></span>							
						</button>
						<ul class="dropdown-menu">
							<li><a>文章</a></li>
							<li><a>帖子</a></li>
							<li><a>用户</a></li>
						</ul>
					</div>
					<input type="text" class="form-control" placeholder="请输入要输入的关键字">
					<span class="input-group-btn">
						<button class="btn btn-default">搜索</button>
					</span>
				</div>
			</form>
			<p class="navbar-text">welcome to <a href="http://www.baidu.com" class="navbar-link">baidu</a></p>
		</div>
	</div>
	












</body>
</html>